<template>
    <div>
        <span>这里是一个很有意思的下划线过渡效果css演示</span>
    </div>
</template>

<script setup>
</script>

<style scoped>
    div {
        margin: 100px;
        width: 360px;
        font-size: 28px;
        line-height: 50px;
    }
    span {
        cursor: pointer;
        background: linear-gradient(to right, #82b7a3, #67a7d1) no-repeat right bottom;
        background-size: 0 2px;
        transition: background-size .6s;
    }
    span:hover {
        background-position-x: left;
        background-size: 100% 2px;
    }
</style>